<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Perceived performance</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Perceived_performance"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Perceived_performance rootpage-Perceived_performance skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Perceived performance</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r1251242444">
/* start https://en.wikipedia.org/ */
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style>
<p><b>Perceived performance</b>, in <a href="Computer_engineering" title="Computer engineering">computer engineering</a>, refers to how quickly a <a href="Software_feature" title="Software feature">software feature</a> appears to perform its task. The concept applies mainly to user acceptance aspects.
</p><p>The amount of time an application takes to start up, or a file to download, is not made faster by showing a startup screen (see <a href="Splash_screen" title="Splash screen">Splash screen</a>) or a file progress <a href="Dialog_box" title="Dialog box">dialog box</a>. However, it satisfies some human needs: it <i>appears</i> faster to the user as well as providing a visual cue to let them know the system is handling their request.
</p><p>In most cases, increasing real performance increases perceived performance, but when real performance cannot be increased due to physical limitations, techniques can be used to increase perceived performance at the cost of marginally decreasing real performance. For example, drawing and refreshing a progress bar while loading a file satisfies the user who is watching, but steals time from the process that is actually loading the file, but usually this is only a very small amount of time. All such techniques must exploit the inability of the user to accurately judge real performance, or they would be considered detrimental to performance.
</p><p>Techniques for improving perceived performance may include more than just decreasing the delay between the user's request and visual feedback. Sometimes an increase in delay can be perceived as a performance improvement, such as when a variable controlled by the user is set to a running average of the users input. This can give the impression of smoother motion, but the controlled variable always reaches the desired value a bit late. Since it smooths out hi-frequency jitter, when the user is attempting to hold the value constant, they may feel like they are succeeding more readily. This kind of compromise would be appropriate for control of a sniper rifle in a video game. Another example may be doing trivial computation ahead of time rather than after a user triggers an action, such as pre-sorting a large list of data before a user wants to see it.
</p><p>A technique to measure and interpret perceived performance remote systems is shown in a 2003<sup id="cite_ref-one_1-0" class="reference"><a href="#cite_note-one-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> and updated in 2005 for virtual machines.<sup id="cite_ref-two_2-0" class="reference"><a href="#cite_note-two-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Web_Performance">Web Performance</h2></div>
<p>For <a href="Web_performance" title="Web performance">Web Performance</a> optimization, perceived performance plays an important role. It tricks the user into thinking a site loads faster than it actually is. To achieve that, render-blocking resources will be loaded last in order to let the browser render the other elements first: like text content, images. In this way, even though the browser loads the same elements, by loading the non-blocking resources first, the user starts to see some content immediately. This trick improves the perceived performance, improving the overall user experience.
</p><p>Here are the main <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">perceived performance</a> steps for better user experiences:
</p><p><b>Minimize initial page load</b>
</p><p>Load only the resources you need in order to display the first content seen by the user. After these resources are loaded, the rest of the resources can be loaded.
</p><p><b>Interactive elements should be available</b>
</p><p>Elements that are interactive, that the user can click on or interact with, should be able to perform those actions as soon as possible. Even with the rest of the page being still loaded, if the user can interact faster with the page, the user will perceive the site as being fast.
</p><p><b>Avoid rendering elements that can cause flicker on screen</b>
</p><p>Elements like fonts or content that takes longer to load should be avoided as much as possible. When loading fonts, try to adjust their size and appearance closer to the default browser styles. In this way, when the font will be loaded, the switch won't look weird and be obvious. For images, charts, or embedded content, make sure you have a placeholder that has the same with and height. In this way when the content comes, the screen won't flicker and the height of the page won't change.
</p>
<div class="mw-heading mw-heading3"><h3 id="Tools">Tools</h3></div>
<p>In order to improve the perceived performance of a web page, there are numerous tools that can be helpful:
</p><p><a href="Google_Chrome" title="Google Chrome">Google Chrome</a>: DevTools provides ways to measure the performance of a site giving you insights on how to improve.
</p><p><a rel="nofollow" class="external text" href="https://www.webpagetest.org/">Webpagetest</a> - SpeedIndex represents the average time it takes for the visible part of a site to be displayed.
</p>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */
.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}
/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-one-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-one_1-0">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.tmurgent.com/WhitePapers/PerceivedPerformance.pdf">Perceived Performance</a></span>
</li>
<li id="cite_note-two-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-two_2-0">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.tmurgent.com/WhitePapers/PerceivedPerformance_VirtualOS.pdf">Perceived Performance and Virtual Operating Systems</a></span>
</li>
</ol></div></div></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2020-12-22" href="https://en.wikipedia.org/wiki/?title=Perceived_performance&oldid=995767609">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>